<template>
    <div>
        <el-main>
            <!--  功能介绍 -->
            <div style="box-sizing: border-box;padding: 15px 15px;width: 100%;height: 250px;background-color: #EDF8DB;">
                <pre style="color: #242424;">
 POP-快速开发平台 心跳服务介绍：
 简介：POP-快速开发平台 是心跳服务，用于监测Java应用的状态等其他信息。
 原理：Java后端会在项目启动的时候开启一个线程，每隔一段时间将该应用的 IP、进程号更新到数据库t_heart_beat_record表中。
 用途：
 1）在各个环境（无论开发、测试、生产）能统一看到所有启动的服务列表；
 2）检测Java应用是否存活；
 3）由管理应用进行监控，出了故障第一时间检查修复
 4）有监控的话，就可以通过消息之类的通知管理员应该异常了
 5） ※强烈推荐※
                </pre>
            </div>
            <br>
            <!--  查询条件封装 -->
            <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="关键字">
                    <el-input v-model="searchForm.key" placeholder="请输入关键字"></el-input>
                </el-form-item>


                <el-form-item>
                    <div class="block">
                        <span class="demonstration">请求时间</span>
                        <el-date-picker v-model="pickTime" type="datetimerange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </div>
                </el-form-item>


            </el-form>
            <el-button type="primary" plain size="small" @click="search">查询</el-button>
            <el-button type="info" plain size="small" @click="reset">重置</el-button>
            <!-- 表格 -->
            <!--  表格展示 -->
            <!--  表格展示 -->
            <!--  表格 -->

            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="projectPath" label="项目路径" align="center">
                </el-table-column>
                <el-table-column prop="serverIp" label="服务器Ip" align="center">
                </el-table-column>
                <!-- 1 -->
                <el-table-column prop="processNo" label="进程号" align="center">
                </el-table-column>
                <el-table-column prop="heartBeatTime" label="进程开启时间" align="center">
                </el-table-column>
                <el-table-column prop="processStartTime" label="心跳当前时间" align="center">
                </el-table-column>





                <!--  准备删除 -->



                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <span style="cursor: pointer; color: #1890ff" class="oper" @click="checkDetail(scope.row)">删除
                        </span>
                        <!-- <span style="color: #1890ff" class="oper"> 下载</span> -->
                        <!-- <span style="color: #1890ff" class="oper" @click="handleDelete(scope.row.fileKey)">
                            删除</span> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页工具栏 -->
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchForm.pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-main>
    </div>
</template>
<script>
    import { heartApi } from "@/api/heart"

    export default {
        created() {
            console.log(heartApi)
            this.search()
        },
        data() {
            return {
                pickTime: [],
                total: 10,


                pickerOptions: [],
                loading: false,
                tableData: [],
                searchForm: {
                    pageNum: 1,
                    pageSize: 10,
                    key: "",
                    beginTime: "",
                    endTime: ""
                },
                tableData: []
            }
        }
        ,
        methods: {
            reset() {
                this.pickTime = []
                this.searchForm = {
                    pageNum: 1,
                    pageSize: 10,
                    key: "",
                    beginTime: "",
                    endTime: ""
                }
                this.search()
            },
            async search() {
                this.searchForm.beginTime = this.pickTime[0]
                this.searchForm.endTime = this.pickTime[1]
                this.loading = true
                try {
                    let res = await heartApi.getHeartPage(this.searchForm)
                    console.log(res)
                    this.tableData = res.data.records
                    this.total = res.data.total
                } catch (e) {
                    console.log(e)
                } finally {
                    this.loading = false
                }
            },
            handleCurrentChange(page) {
                this.searchForm.pageNum = size;

            },
            handleSizeChange(size) {
                this.searchForm.pageSize = size;
                this.search()

            }
        }
    }
</script>
<style scoped>
    /deep/ .has-gutter th {
        background-color: #F2F6FC;
    }
</style>